<template>
  <view class="recoredDetailPage">
    <view class="head" :style="[{ height: customBar + 'px' }]">
      <u-navbar
        title="预约记录详情"
        :autoBack="true"
        :titleStyle="{ fontSize: '34rpx', fontWeight: '500' }"></u-navbar>
    </view>

    <view class="activeContent">
      <view class="title">{{ obj.activity.name }}</view>
      <view class="banner">
        <image class="img" :src="HTTP_IMG_URL() + obj.activity.images"></image>
      </view>
      <view class="acitveTime">
        活动时间：{{ obj.activity.activity_time_text }}
      </view>
      <view class="acitveTime">
        <view class="acitveMsg">
          联系人：{{ obj.activity.contacts }} {{ obj.activity.contact_number }}
        </view>
      </view>
      <view class="acitveTime">
        活动费用：
        <view class="red">
          {{ obj.total_price !== "0" ? obj.activity.price + "/人" : "免费" }}
        </view>
      </view>
      <view
        class="acitveTime"
        style="border-top: 1px #e6e5e5 solid; padding-top: 20rpx">
        活动介绍：{{ obj.activity.content }}
      </view>
      <!-- <view class="acitveTime">活动图片：</view>
      <view class="yyBox">
        <image class="yyImg" src="@/static/reservation/leftImg.png"></image>

        <image class="yyImg" src="@/static/reservation/leftImg.png"></image>

        <image class="yyImg" src="@/static/reservation/leftImg.png"></image>

        <image class="yyImg" src="@/static/reservation/leftImg.png"></image>
      </view> -->
    </view>

    <view style="height: 50rpx"></view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { HTTP_IMG_URL } from "../../config/app.js";
export default {
  data() {
    return {
      customBar: 73,
      id: "",
      obj: "",
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onLoad(params) {
    console.log(params);
    this.id = params.id;
    this.getDetail(params.id);
  },
  methods: {
    HTTP_IMG_URL() {
      return HTTP_IMG_URL;
    },
    handleAll() {
      uni.navigateTo({
        url: "/pages/reservation/album",
      });
    },
    getDetail(id) {
      var that = this;
      that.$Api.reservation
        .getOrderDetail({
          order_id: id,
        })
        .then((res) => {
          this.obj = res.data;
        });
    },
    handleSure() {
      uni.navigateTo({
        url: "/pages/reservation/orderDetail",
      });
    },
  },
};
</script>

<style lang="scss">
.recoredDetailPage {
  height: 100%;
  min-height: 100vh;
  font-family: PingFang SC;
  background: #f5f5f4;
  padding: 30rpx;
  box-sizing: border-box;
  .head {
    background: #fff;
  }
  .banner {
    width: 100%;
    height: 420rpx;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .activeContent {
    width: 100%;
    background: #fff;
    padding: 26rpx 38rpx;
    box-sizing: border-box;
    text-align: justify;
    border-radius: 20rpx;
    margin-top: 30rpx;
    .title {
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
      align-items: center;
      text-align: center;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      .status {
        width: 113rpx;
        height: 40rpx;
        // background: #a3c616;
        background: url("../../static/reservation/status.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
        font-size: 28rpx;
        text-align: center;
        margin-right: 10rpx;
      }
    }
    .activeimg {
      margin-top: 20rpx;
      width: 100%;
    }
    .acitveTime {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 28rpx;
      color: #999ca7;
      display: flex;
      margin-top: 24rpx;
      .green {
        color: #a3c616;
        font-size: 30rpx;
      }
      .red {
        color: #fd463e;
        font-size: 30rpx;
      }
    }
    .acitveHite {
      font-size: 28rpx;
      color: #999ca7;
      line-height: 48rpx;
      margin-top: 18rpx;
    }
    .acitveMsg {
      display: flex;
      justify-content: space-between;
    }
    .acitveMsg:nth-child(2) {
      margin-left: 120rpx;
    }
  }

  .yyBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .yyImg {
      width: 194rpx;
      height: 136rpx;
      margin-right: 15rpx;
      margin-bottom: 20rpx;
    }
    .yyImg:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>
